<template>
  <div>
    <h1>ref</h1>
    <My-ref ref="one" one="张三" two="李四"></My-ref>
    <p ref="pty">我是{{aaa}}</p>
    <button @click="fun">点击</button>
     <!-- ref在普通标签上使用可以获取到真实dom节点，也可以在引用的子组件的标签上，可以获取子组件的vue实例对象进而调用方法获取变量 -->
     <!-- $refs 组件渲染完成以后生效，并且不是响应式的，最好只做备用方案，避免直接在页面或计算属性上，使用$refs -->
  </div>
</template>

<script>
import MyRef from "../components/MyRef.vue";
export default {
  data() {
    return{
        aaa:'我是修改后hou的'
    }
  },
  methods: {
    fun(){
        // console.log(this.aaa)
        // console.log(this.$refs.pty)
        // console.log(this.$refs.one.in,'this.$refs.one.in')
        // //this.$refs.one===子组件中的this
        // console.log(this.$refs.one.handle(),'this.$refs.one.handle()')
        console.log(this.$children[0],'this.$children')
        console.log(this.$refs.pty.innerText)
        // 虚拟dom
        // 为什么用虚拟dom？
        // 因为真实dom 性能低下 操作复杂，容易造成重绘与回流，每次修改，每次所有的dom都会重新绘制一次而虚拟dom 他会通过比较新旧的dom 树的区别，找出需要更新的部分，然后将需要更新的部分再去映射到 真实dom上，减少dom更新的次数，这个过程叫做diff算法
    }
  },
  components: {
    MyRef,
  },
};
</script>

<style>
</style>